import React, { useState, useImperativeHandle, useEffect } from 'react';
import { Checkbox, Row, Col } from 'antd';
export default function SetColumn(props) {
  const { options, defaultColumns } = props;
  const [value, setValue] = useState([]);

  useEffect(() => {
    if (defaultColumns && defaultColumns.length > 0) {
      setValue(defaultColumns);
    } else {
      setValue(options.map((item) => item.key));
    }
  }, [defaultColumns]);

  useImperativeHandle(props.createRef, () => ({
    // 暴露方法给父组件,收集验证值
    getValue: () => {
      if (value.length === 0) {
        throw '请至少选择一列!';
      } else {
        return value;
      }
    },
  }));

  return (
    <div style={{ marginBottom: '30px' }}>
      <Checkbox.Group onChange={(checkedValues) => setValue(checkedValues)} value={value}>
        <Row gutter={10}>
          {options.map((item) => {
            return (
              <Col span={6} style={{ margin: '5px 0' }} key={item.key}>
                <Checkbox value={item.key}>
                  {item.title instanceof Object ? item.title.props.children.props.title : item.title}
                </Checkbox>
              </Col>
            );
          })}
        </Row>
      </Checkbox.Group>
    </div>
  );
}
